<template>
  <div class="tree">
    <div class="sidebar" id="sidebar">
      <ul class="nav nav-list" id="menu">
        <li class="menuhide" v-for="item in treeData">
          <a class="dropdown-toggle" @click="showTree($event,item.menuName)"><i></i><span class="menu-text" v-text="item.menuName"></span><b class="arrow icon-angle-down"></b></a>
          <ul class="submenu">
            <li v-for="items in item.menuListTwo">
              <router-link :to="items.menuUrl" @click.native="addTabs({id:''+items.menuId+'',title: ''+items.menuName+'',close: true,click: true,url: ''+items.menuUrl+''});avisited($event)">
                <i></i>
                <span class="menu-text">{{items.menuName}}</span>
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
      <div class="sidebar-collapse" id="sidebar-collapse">
        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import "../utils/jquery/jquery-3.1.1.min"
  import "../utils/bootstrap/js/bootstrap"
  import "../utils/bootstrap/js/bootstrap-tab"
  let Base64 = require('js-base64').Base64;
export default {
  name: 'tree',
  data () {
    return {
      treeData:[],
      showMenu:false
    }
  },
  created () {
    const self = this;
    self.getTree();
    $(window).resize(function(){
      self.resize();
    });
  },
  mounted () {
    const self = this;
    let bIndex = false;
    $("#spaBasisIfs").attr("src",URLS.basis+ "/welcome.jsp");
    $(".nav-tabs").on("click","[data-toggle='tab']",function () {
      let bUrl = $(this).attr("data-url");
      if(!!bUrl){
        var base64Url = Base64.decode(bUrl.substring(10));
      }
      if(!!base64Url){
        bIndex = true;
        var toUrl = URLS.basis +"/"+ base64Url.replace("[x]","/").replace(".do1",".do?").replace(".syb1",".syb?");
      }
      if(!bIndex){
        $("#spaBasisIfs").attr("src",URLS.basis+ "/welcome.jsp");
        bIndex = true;
      }else{
        $("#spaBasisIfs").attr("src",toUrl);
        bIndex = false;
      }
    });
    $(".tabclassall").click(function(){
      $("li[role='presentation']",".nav-tabs").remove();
      $(".nav-tabs .home").addClass("active");
      $("#spaBasisIfs").attr("src",URLS.basis+ "/welcome.jsp");
      $(".nav-tabs-bar").hide();
    })
  },
  methods:{
    getTree () {
      const self = this;
      self.$http.get(URLS.basis + URLS.menuUrl).
      then(function (data) {
        const user = JSON.parse(sessionStorage.getItem("user"));
      	const trdata = new Array()
        const rsdata = data.body;
        for(var i in rsdata){
          for(var j in rsdata[i].menuListTwo){
            var params = Tools.Nformat("comCode={0}&userCode={1}",user.comCode,user.personID);
            if(rsdata[i].menuListTwo[j].menuUrl.indexOf("?") < 0){
              params = Tools.Nformat("?{0}",params);
            }else{
              params = "&"+params;
            }
            let menuUrl = rsdata[i].menuListTwo[j].menuUrl+params;
          	let base64Url = Base64.encode(menuUrl).replace("/","[x]")
          	rsdata[i].menuListTwo[j].menuUrl = "/spaBasis/"+base64Url;
          }
        }
        this.treeData = rsdata;
      })
    },
    showTree (e) {
      if($(e.target).siblings("ul.submenu").is(":hidden") || $(e.target).parent().siblings("ul.submenu").is(":hidden")){
        $(e.target).siblings("ul.submenu").show();
        $(e.target).parent().addClass("menushow");
        $(e.target).parent().siblings("ul.submenu").show();
        $(e.target).parent().parent().addClass("menushow");
      }else{
        $(e.target).siblings("ul").hide();
        $(e.target).parent().removeClass("menushow");
        $(e.target).parent().siblings("ul").hide();
        $(e.target).parent().parent().removeClass("menushow");
      }
    },
    avisited (e) {
      $(e.target).addClass("visited");
      $(e.target).parent().parent().siblings().find(".visited").removeClass("visited");
      $(e.target).parent().parent().parent().parent().siblings().find(".visited").removeClass("visited");
    },
    addTabs (options) {
      const self = this;
      var id,title,content;
      id = "tab_" + options.id;
      $(".active").removeClass("active");
      if (!$("#tab_" + id)[0]) {
        title = '<li role="presentation" id="tab_' + id + '"><a href="#' + id + '" aria-controls="' + id + '" role="tab" data-toggle="tab" data-url="'+options.url+'">' + options.title;
        if (options.close) {
          title += ' <i class="glyphicon glyphicon-remove" tabclose="' + id + '">X</i>';
        }
        title += '</a></li>';
        if (options.content) {
          content = '<div role="tabpanel" class="tab-pane" id="' + id + '">' + options.content + '</div>';
        } else {
          content = '<div role="tabpanel" class="tab-pane" id="' + id + '"></div>';
        }
        $(".nav-tabs").prepend(title);
      }
      $("#tab_" + id).addClass('active');
      $("#" + id).addClass("active");
      let base64Url = Base64.decode(this.$route.params.toUrl);
      let toUrl = URLS.basis +"/"+ base64Url.replace("[x]","/").replace(".do1",".do?").replace(".syb1",".syb?");
      $("#spaBasisIfs").attr("src",toUrl)
      self.resize();
    },
    tabslisum () {
      var sum = 0;
      $(".nav-tabs li").each(function(){
        sum += $(this).width();
      })
      return sum;
    },
    resize () {
      var contentWidth = $(".main-content").width();
      var tabwidth = this.tabslisum();
      if(contentWidth < tabwidth){
        $(".nav-tabs-bar").show();
      }else{
        $(".nav-tabs-bar").hide();
      }
    }
  }
}
</script>
<style scoped>
  @import "../utils/bootstrap/css/bootstrap.min.css";
  @import "../css/tree.css";
</style>
